<template>
	<view class="search">
		<image class="noShop" v-if="!count" src="/static/images/noShopper.png"></image>
		<recommend v-else :hostProduct="productList"></recommend>
		<view class="over_line" v-if="isover">----- 我也是有底线的 ------</view>
	</view>
</template>

<script>
	import recommend from '@/components/recommend';
	export default {
		components: {
			recommend
		},		
		data() {
			return {
				productList:[],
				value:'',
				pagenum: 1, // 页码值
				pagesize: 20, // 每页显示多少条数据
				count:0,
				isover: false, // 判断是否到底部，给用户提示
				isloading: false // 判断数据是否在加载中
			};
		},
		onLoad: function(options) {
			this.value = options.searchValue || ''
			this.getData();
		},
		methods: {
			getData(){
				// 正在加载下页数据
				this.isloading = true;				
				this.$api.getProductLists({
					page:this.pagenum,
					limit:this.pagesize,
					pid:0,
					order:'sales',
					keyword:this.value
				},res=>{
					if(res.status==200){
						this.count = res.data.count;
						// 再次加载 获取数据
						this.productList = [...this.productList, ...res.data.list]
						this.productList.forEach(item => {
							item.integral = parseFloat(item.integral)
						})
						// 没有在加载下页数据
						this.isloading = false
					}
				})
			}
		},
		onReachBottom() {
			if (!this.productList.length) {
				return;
			}
			// 判断当前是否正在请求数据中
			  if (this.isloading) {
			    return
			  }
			  if (this.pagenum * this.pagesize >= this.count) {
			  	this.isover = true;
			  	return;
			  }
		  this.pagenum++
		  this.getData()
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}
	.search {
		position: relative;
		.noShop {
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translate(-50%);
		}
		.over_line {
			text-align: center;
			background-color: #F5F5F5;
			font-size: 26rpx;
			color: #999;
			padding: 20rpx 0;
		}
	}
</style>
